<script setup>
// import { artEditChannelService } from '@/api/article'
import { ref } from 'vue'
import { useArticleStore } from '@/stores/index'

const dialogVisible = ref(false)
const formRef = ref()
const articleStore = useArticleStore()

const formModel = ref({
  cate_name: '',
  cate_alias: '',
})
const rules = {
  cate_name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { pattern: /^\S{1,10}$/, message: '分类名必须是1-10位非空字符', trigger: 'blur' },
  ],
  cate_alias: [
    { required: true, message: '请输入分类别名', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '分类名必须是1-15位字母或数字', trigger: 'blur' },
  ],
}

// 组件对我暴露一个方法 open ，基于open传来的参数，区分添加还是编辑
// open({}) => 表单无需渲染，说明是添加
// open({id, cate_name,...}) => 表单需要渲染，说明是编辑
// open 调用后，可以打开弹窗

const open = (row) => {
  console.log(row)

  dialogVisible.value = true
  formModel.value = { ...row } //添加 =》 重置了表单内容，编辑=》 存储了需要回显的数据
}

const emit = defineEmits(['success'])
const onSubmit = async () => {
  try {
    await formRef.value.validate()
    if (formModel.value.id) {
      // 编辑分支：加日志确认是否进入
      console.log('进入编辑分支，准备调用 setChannelList')
      articleStore.setChannelList(formModel.value)
      ElMessage.success('编辑成功')
      console.log('编辑成功后，准备关闭弹窗')

      // 关键1：关闭弹窗前，先重置 formModel（避免残留数据影响下次打开）
      formModel.value = { cate_name: '', cate_alias: '' }
      // 关键2：确保设置 dialogVisible 为 false
      dialogVisible.value = false
      console.log('弹窗已设置为关闭，当前 dialogVisible：', dialogVisible.value)
    } else {
      // 添加分支（不变）
      const id = Date.now()
      formModel.value.id = id
      articleStore.addChannelList(formModel.value)
      ElMessage.success('添加成功')
      formModel.value = { cate_name: '', cate_alias: '' }
      dialogVisible.value = false
    }
    // 子传父通知父组件更新成功
    emit('success')
  } catch (error) {
    // 关键3：捕获表单校验失败的错误，避免代码中断（之前没加 try/catch，校验失败会吞掉后续逻辑）
    console.error('提交失败（校验或接口错误）：', error)
    ElMessage.error('提交失败，请检查表单')
  }
}

// 向外暴露
defineExpose({
  open,
})
</script>
<template>
  <el-dialog v-model="dialogVisible" :title="formModel.id ? '编辑分类' : '添加分类'" width="30%">
    <el-form ref="formRef" :model="formModel" :rules="rules" label-width="100px">
      <el-form-item prop="cate_name" label="分类名称">
        <el-input v-model="formModel.cate_name" placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item prop="cate_alias" label="分类别名">
        <el-input v-model="formModel.cate_alias" placeholder="请输入分类别名"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
